<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Nanozyme of AHUCM</title>
    <link href="{{ url_for('static', filename='layui/css/layui.css') }}" rel="stylesheet">
    <style>
        body {
            margin-bottom: 100px;
        }
    </style>
</head>

<!--<style>-->
<!--    .layui-layer {-->
<!--        background-color: #353535 !important-->
<!--    }-->
<!--</style>-->
<body>

<!-- 主体内容 -->
<!-- 导航栏 -->
<div class="layui-header header">
    <div class="main">
        <ul class="layui-nav layui-nav-left" lay-filter="filter">
            <a href="/" style="position: absolute; top: -8px; left: 50px; width: 260px; height: 80px;
               background:url(../static/img/logo.jpg) no-repeat; background-size:contain"></a>
            <li class="layui-nav-item nav-left" style="margin-left:320px;">
                <a href="/">HOME</a>
            </li>
            <li class="layui-nav-item nav-left">
                <a href="gpt">GPT</a>
            </li>
            <li class="layui-nav-item nav-left">
                <a href="javascript:">PREDICTION</a>
                <dl class="layui-nav-child">
                    <dd><a href="base">TYPE</a></dd>
                    <dd><a href="advanced">ACTIVITY</a></dd>
                    <dd><a href="compare_predictions">COMPARE PREDICTIONS</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item" style="margin-left: 20px;">
                <a href="database">DATA CENTER</a>
            </li>
            <li class="layui-nav-item layui-this">
                <a href="offer_a_sample">OFFER A SAMPLE</a>
            </li>
            <li class="layui-nav-item">
                <a href="about">ABOUT</a>
            </li>
        </ul>
        <!--        <ul class="layui-nav layui-layout-right layui-nav-right" lay-filter="filter">
                    <li class="layui-nav-item">
                        <a href="javascript:">USER</a>
                        <dl class="layui-nav-child">
                            <dd><a href="javascript:">LOGOUT</a></dd>
                        </dl>
                    </li>
                </ul>-->
    </div>
</div>

<div style="width: 90%; margin: auto; margin-top: 20px;">
    <p style="font-weight: bold;font-size :26px;margin-left: 20px">Enter new nanozyme into database</p>
    <!-- 表格 -->
    <form class="layui-form layui-form-pane" id="btn-submit" style="margin: 20px">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label" style="width: 200px">Name</label>
                <div class="layui-input-inline">
                    <input type="text" name="name" required autocomplete="off"
                           class="layui-input" lay-verify="required|name"
                           lay-reqtext="Please enter the chemical name">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label" style="width: 275px">Mimic enzyme activity</label>
                <div class="layui-input-inline">
                    <input type="text" name="mimic_enzyme_activity" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label" style="width: 160px">N</label>
                <div class="layui-input-inline">
                    <input type="text" name="n" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label" style="width: 200px">P</label>
                <div class="layui-input-inline">
                    <input type="text" name="p" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label" style="width: 275px">S</label>
                <div class="layui-input-inline">
                    <input type="text" name="s" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label" style="width: 160px">Si</label>
                <div class="layui-input-inline">
                    <input type="text" name="si" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label" style="width: 200px">Se</label>
                <div class="layui-input-inline">
                    <input type="text" name="se" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label" style="width: 275px">B</label>
                <div class="layui-input-inline">
                    <input type="text" name="b" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label" style="width: 160px">F</label>
                <div class="layui-input-inline">
                    <input type="text" name="f" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label" style="width: 200px">Cl</label>
                <div class="layui-input-inline">
                    <input type="text" name="cl" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label" style="width: 275px">Br</label>
                <div class="layui-input-inline">
                    <input type="text" name="br" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label" style="width: 160px">I</label>
                <div class="layui-input-inline">
                    <input type="text" name="i" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label" style="width: 200px">Metal ratio</label>
                <div class="layui-input-inline">
                    <input type="text" name="metal_ratio" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label" style="width: 275px">Metal type</label>
                <div class="layui-input-inline">
                    <input type="text" name="metal_type" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label" style="width: 160px">Metal valence</label>
                <div class="layui-input-inline">
                    <input type="text" name="metal_valence" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label" style="width: 200px">Submetal ratio</label>
                <div class="layui-input-inline">
                    <input type="text" name="submetal_ratio" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label" style="width: 275px">Submetal type</label>
                <div class="layui-input-inline">
                    <input type="text" name="submetal_type" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label" style="width: 160px">Submetal valence</label>
                <div class="layui-input-inline">
                    <input type="text" name="submetal_valence" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label" style="width: 200px">3rd metal ratio</label>
                <div class="layui-input-inline">
                    <input type="text" name="_3rd_metal_ratio" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label" style="width: 275px">3rd metal type</label>
                <div class="layui-input-inline">
                    <input type="text" name="_3rd_metal_type" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label" style="width: 160px">3rd metal valence</label>
                <div class="layui-input-inline">
                    <input type="text" name="_3rd_metal_valence" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label" style="width: 200px">4th metal ratio</label>
                <div class="layui-input-inline">
                    <input type="text" name="_4th_metal_ratio" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label" style="width: 275px">4th metal type</label>
                <div class="layui-input-inline">
                    <input type="text" name="_4th_metal_type" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label" style="width: 160px">4th metal valence</label>
                <div class="layui-input-inline">
                    <input type="text" name="_4th_metal_valence" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label" style="width: 200px">shape</label>
                <div class="layui-input-inline">
                    <input type="text" name="shape" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label" style="width: 275px">Size/nm</label>
                <div class="layui-input-inline">
                    <input type="number" name="size_per_nm" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label" style="width: 160px">Surface modification</label>
                <div class="layui-input-inline">
                    <input type="text" name="surface_modification" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label" style="width: 200px">Dispersion medium</label>
                <div class="layui-input-inline">
                    <input type="text" name="dispersion_medium" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label" style="width: 275px">Buffer pH value</label>
                <div class="layui-input-inline">
                    <input type="number" name="buffer_ph_value" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label" style="width: 160px">Buffer pH</label>
                <div class="layui-input-inline">
                    <input type="number" name="buffer_ph" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label" style="width: 200px">Temperature/℃</label>
                <div class="layui-input-inline">
                    <input type="number" name="temperature" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label" style="width: 275px">Substrate1</label>
                <div class="layui-input-inline">
                    <input type="text" name="substrate1" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label" style="width: 160px">Substrate2</label>
                <div class="layui-input-inline">
                    <input type="text" name="substrate2" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label" style="width: 200px">Substrate2 concentration(mM)</label>
                <div class="layui-input-inline">
                    <input type="text" name="substrate2_concentration_mm" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label" style="width: 275px">Km/mM</label>
                <div class="layui-input-inline">
                    <input type="number" name="km_per_mm" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label" style="width: 160px">Vmax/μM s-1</label>
                <div class="layui-input-inline">
                    <input type="number" name="vmax_micro_m_per_s" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label" style="width: 200px">Kcat/s-1</label>
                <div class="layui-input-inline">
                    <input type="text" name="kcat_per_s" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label" style="width: 275px">k cat /Km
                    (Catalytic efficiency )/M-1 s-1</label>
                <div class="layui-input-inline">
                    <input type="text" name="k_cat_per_Km_per_mol_per_s" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label" style="width: 160px">IC50 (SOD) /μM</label>
                <div class="layui-input-inline">
                    <input type="text" name="ic50_per_micro_mol" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label" style="width: 200px">path</label>
                <div class="layui-input-inline">
                    <input type="text" name="path" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label" style="width: 275px">num</label>
                <div class="layui-input-inline">
                    <input type="text" name="num" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label" style="width: 160px">data reference doi</label>
                <div class="layui-input-inline">
                    <input type="text" name="data_reference_doi" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
        </div>

        <!-- summit button-->
        <div class="layui-form-item">
            <div class="layui-col-md6">
                <button class="layui-btn" style="background-color: #336b03" lay-submit lay-filter="demo-submit">Submit
                </button>
            </div>
            <div class="layui-col-md6">
                <!--                <button type="reset" class="layui-btn layui-btn-danger"style="background-color: #c44d05">Clear</button>-->
            </div>
        </div>
    </form>
</div>

<script src="{{ url_for('static', filename='layui/layui.js') }}"></script>
<script src="{{ url_for('static', filename='darkreader/darkreader.min.js') }}"></script>

<script>
    //登录状态的全局变量
    var isAuthenticated = localStorage.getItem('isAuthenticated') === 'true';

    DarkReader.enable({
        brightness: 200,
        contrast: 150,
        sepia: -30
    });

    layui.use(function () {
        var $ = layui.$;
        var form = layui.form;
        var layer = layui.layer;
        form.verify({
            // 验证用户名，且为必填项
            name: function (value, elem) {
                if (value.length < 2) {
                    return 'The name length need > 2';
                }
            }
        })

        // 提交例子
        form.on('submit(demo-submit)', function (data) {
            var field = data.field; // 获取表单全部字段值
            console.log(field)

            // 此处可执行 Ajax 等操作
            $.ajax({
                url: '/nano_enzy_data/save',
                data: JSON.stringify(data.field),
                dataType: 'json',
                contentType: 'application/json',
                type: 'post',
                success: function (result) {
                    console.log(result)
                    layer.alert('Submit Success', {
                        icon: 6,
                        shadeClose: true,
                        title: 'INFO'
                    })
                },
                error: function () {
                    layer.alert('Please Log in First');
                }
            })
            return false; // 阻止默认 form 跳转
        });

    });
</script>

</body>
</html>
<!--页脚-->
<footer style="position: fixed; bottom: 0px; width: 100%; height:60px;
            background-color: #eee;
            text-align: center;">
    <div style="margin-top: 14px">
        <p>AHUCM 2024 &copy; ahtcm.edu.cn</p>
        <p>Anhui University of Chinese Medicine</p>
    </div>
</footer>